<template>
  <div class="review-bar" :style="barStyle">
    <div class="review-bar-chart">
      <VptXBar
        :chartData="list"
        autoRander
        :yAxisData="yData"
        :legend="legend"
        v-bind="barProps"
        :bottom="bottom"
        :chartType="chartType"
        :color="color"
        :isShow="isShow"
      ></VptXBar>
      <div
        class="vpt-plan-value"
        v-if="legend.length == 0"
        :style="noDataStyle"
      >
        <img src="../../../assets/img/theme3/wmpty.png" alt="暂无数据图片" />
        <div class="no-data">无提示/告警问题</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import VptXBar from "@/components/echarts/vpt-x-bar/index.vue";
import { fontSize } from "@/utils/rem/rem.js";
import { ref, computed } from "vue";

const props = defineProps({
  chartType: { type: String, default: "init" },
  barData: {
    type: Array,
    default: () => {},
  },
  bottom: {
    type: Number,
    default: 80,
  },
  top: {
    type: Number,
    default: 35,
  },
  yAxisProps: { type: Object, default: () => [] },
  // 柱子颜色
  color: { type: Array, default: () => [] },
  // 是否显示滚动条
  isShow: { type: Boolean, default: true },
  barStyle: {
    type: Object,
    default: () => ({
      marginTop: "0.16rem",
    }),
  },
});

const legend = computed(() => {
  const modulesSet = new Set(props.barData.map((item) => item.type));
  return Array.from(modulesSet);
});

const list = computed(() => {
  const groupedData = new Map();

  // 遍历原始数据，按类型分组
  props.barData.forEach((item) => {
    const { type, days } = item;
    if (!groupedData.has(type)) {
      groupedData.set(type, []);
    }
    groupedData.get(type).push(Number(days)); // 转换为数字类型
  });

  // 将 Map 转换成目标格式的数组
  return Array.from(groupedData, ([type, days]) => ({
    name: type,
    data: days,
  }));
  // const stages = Object.keys(props.barData[0]?.data || {});

  // // 直接构建并返回所需的数据格式
  // return stages.map((stage) => {
  //   const chineseName = {
  //     requirement: "需求",
  //     develop: "开发",
  //     test: "测试",
  //   }[stage];
  //   const values = props.barData.map((item) => item.data[stage]);
  //   return {
  //     name: chineseName,
  //     value: values,
  //   };
  // });
});

const yData = computed(() => {
  const modulesSet = new Set(props.barData.map((item) => item.module));
  return Array.from(modulesSet);
  // return props.barData.map((item) => item.module);
});
const barProps = {
  // legend: {
  //   data: legend,
  // },
  color: ["#165DFF", "#1AC6FF", "#00B42A"],
  dataZoom: {
    show: true,
    // endValue: 14,
    bottom: fontSize(props.bottom),
  },
  grid: {
    top: props.top,
  },
};
</script>

<style lang="less" scoped>
.review-bar {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0.16rem;
  box-sizing: border-box;

  .review-bar-header {
    font-weight: 400;
    font-size: 0.28rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.16rem 0.05rem;
  }
  .review-bar-chart {
    flex: 1;
    height: 0;
  }
  .vpt-plan-value {
    padding-top: 0.2rem;
    font-size: 0.16rem;
    text-align: center;
    // color: #ffffffb3;
    position: relative;
    top: -1.8rem;
  }
}
</style>
